@charset "utf-8";

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  padding: 0;
  margin: 0;
}


body {
  padding: 0px;
  margin: 0px;
	background:#0e1036;
	font-family: "微软雅黑";
	color: #666;
	font-size: .1rem;
  -webkit-font-smoothing: antialiased;
}

li {
	list-style-type: none;
}

i {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
}

img {
	border: none;
	max-width: 100%;
}

ul,
h1{
	padding: 0;
	margin: 0
}

.bodybg{
   position: fixed;
   top: 0;
   left: 0%;
   width: 100%;
   height: 100%;
   z-index: 1;
}

#particles{
	position: fixed;
	top: 0;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.4;
}

/* 加载旋转动画 */
#load {
	width: 100%;
	height: 100%;
	position: absolute;
	/* background: url(../../assets/bigdataStyle1/images/data08.png) no-repeat #061537; */
	background-size: cover;
	top: 0;
	left: 0;
	z-index: 999
}

#load .load_img {
	position: absolute;
	left: calc(50% - 182px);
	top: calc(50% - 182px);
}

.load_img img {
	position: absolute;
	left: 0;
	top: 0;
}

.load_img .jzxz1 {
	animation: xz1 8s infinite linear;
}

@keyframes xz1 {
	from {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.load_img .jzxz2 {
	animation: xz2 7s infinite linear;
}

@keyframes xz2 {
	from {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(-180deg);
	}

	to {
		transform: rotate(-360deg);
	}
}

.clearfix:after,
.clearfix:before {
	display: table;
	content: " "
}

.clearfix:after {
	clear: both
}




.pulll_left {
	float: left;
}

.pulll_right {
	float: right;
}

/*谷哥滚动条样式*/

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	position: absolute
}

::-webkit-scrollbar-thumb {
	background-color: #5bc0de
}

::-webkit-scrollbar-track {
	background-color: #0b111b;
}

.hide-scrollbar::-webkit-scrollbar-thumb{
    visibility : hidden;
    display: none;
}
.hide-scrollbar{
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

/***/

.loading {
	position: fixed;
	left: 0;
	top: 0;
	font-size: .3rem;
	z-index: 100000000;
	width: 100%;
	height: 100%;
	background: #1a1a1c;
	text-align: center;
}

.loadbox {
	position: absolute;
	width: 160px;
	height: 150px;
	color: #324e93;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -75px;
  transform: scale(0.65);
}

.loadbox img {
	margin: 10px auto;
	display: block;
	width: 40px;
}

.copyright {
	background: rgba(19, 31, 64, .32);
	border: 1px solid rgba(255, 255, 255, .05);
	line-height: .5rem;
	text-align: center;
	padding-right: 15px;
	bottom: 0;
	color: rgba(255, 255, 255, .7);
	font-size: .16rem;
}

.head {
	height: 1.25rem;
	background: url(../../assets/bigdataStyle1/images/head_bg2.png);
  background-repeat: no-repeat;
  background-position: center top;
	background-size: 100% 85%;

	position: relative;
	z-index: 999;
}

.head h1 {
	color: #fff;
	text-align: center;
	font-size: .42rem;
	line-height: .75rem;
	/* background: url(../../assets/bigdataStyle1/images/head.gif) no-repeat center center;
	background-size: 600px auto;
	background-position: center center;
	padding-bottom: 65px; */

}

.head h1 img {
	width: 1.5rem;
	display: inline-block;
	vertical-align: middle;
	margin-right: .2rem
}

.weather {
	position: absolute;
	right: .3rem;
	top: 0;
	line-height: .75rem;
	font-weight: bold;
  transform: scale(0.9);
  transform-origin:center center;
}

.weather img {
	width: .37rem;
	display: inline-block;
	vertical-align: middle;
}

.weather span {
	color: #00ffff;
	font-size: .18rem;
	padding-right: .1rem;
}

.mainbox {
	padding: 0rem .4rem 0rem .4rem;
	position: relative;
	z-index: 999;
}

.mainbox>ul {
	margin-left: -.4rem;
	margin-right: -.4rem;
}

.mainbox>ul>li {
	float: left;
	padding: 0 .1rem;
}

.mainbox>ul>li {
	width: 35%
}

.mainbox>ul>li>li {
	width: 50%
}


.boxall {
	/* border: 1px solid rgba(25, 186, 139, .17); */
	/* background: rgba(0,0,0,.5) url(../../assets/bigdataStyle1/images/line.png); */
	/* background: rgba(0,0,0,.5); */
	/* background: #1e2730; */
	background: rgba(0, 35, 60, 0.80);
	background-size: 480px auto;
  background-repeat: repeat;
  background: hska(0,0%,100%,.3);
	position: relative;
	padding: 0.15rem 0.07rem 0.3rem 0.07rem;
	margin-bottom: .1rem;
	z-index: 9999;
	 /* box-shadow: 1px 2px 10px 1px rgba(14,252,255,0.53), inset 5px 4px 100px 1px rgba(14,252,255,0.34); */
  /* box-shadow: 0 0 1px 1px rgba(48, 108, 166, 1); */
  border-top:1px solid rgba(48, 108, 166, 1);
  border-bottom:1px solid rgba(48, 108, 166, 1);
}
.gsmhBg:before {
    /* position: absolute;
    content: "";
    height: 100%;
    width: 100%;
     background-color: rgba(0,0,0,0.75);
     background-color: #1E2730;
    left:0;
    top: 0;
   -webkit-filter: blur(12px);
     -moz-filter: blur(12px);
     -ms-filter: blur(12px);
     -o-filter: blur(12px);
     filter: blur(12px); */
}
.boxalls {
	border: 1px solid rgba(25, 186, 139, .17);
	/* background: rgba(0, 0, 0, .5) url(../../assets/bigdataStyle1/images/line.png); */
	/* background: rgba(0, 0, 0, .5); */
	background: rgba(0, 35, 60, 0.55);
	background-size: 480px auto;
  background-repeat: repeat;
	position: relative;
	padding: 0.15rem 0.15rem 0.3rem 0.15rem;
	margin-bottom: .1rem;
	z-index: 9999;
  box-shadow: 0 0 1px 1px rgba(48, 108, 166, 1);
	 /* box-shadow: 1px 2px 10px 1px rgba(14,252,255,0.53), inset 5px 4px 100px 1px rgba(14,252,255,0.34); */
}
.boxallin{
	/* border: 1px solid rgba(25, 186, 139, .17); */
	background: rgba(255, 255, 255, .01) url(../../assets/bigdataStyle1/images/line.png);
	background-size: 480px auto;
	position: relative;
	padding: 0.15rem 0.15rem 0.3rem 0.15rem;
	margin-bottom: .1rem;
	z-index: 20;
	 /* box-shadow: 1px 2px 10px 1px rgba(14,252,255,0.34), inset 5px 4px 100px 1px rgba(14,252,255,0.34); */
}

.boxall:before,
.boxall:after {
	position: absolute;
	width: .1rem;
	height: .1rem;
	content: "";
	border-top: 2px solid #00ffff;
	top: 0;
}

.boxall:before,
.boxfoot:before {
	border-left: 2px solid #00ffff;
	left: 0;
}

.boxall:after,
.boxfoot:after {
	border-right: 2px solid #00ffff;
	right: 0;
}

.alltitle {
	font-size: .17rem;
	color: #fff;
	text-align: left;
	padding-bottom: 0.1rem;
	margin-bottom: 0.13rem;
	margin-top: -0.08rem;
  position: relative;
  letter-spacing: 1px;
  background: rgba(0,0,0,.35);
  padding-top: 7px;
  height: 0.35rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  border-radius: 0.02rem;
  letter-spacing: 1px;
  border-radius: 5px;
}

.alltitle .iconfont{
  color: #ffff;
  position: relative;
  top: 1px!important;
}

.boxfoot {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
}

.boxfoot:before,
.boxfoot:after {
	position: absolute;
	width: .1rem;
	height: .1rem;
	content: "";
	border-bottom: 2px solid #00ffff;
	bottom: 0;
}

.bar {
	background: rgba(101, 132, 226, .1);
	padding: .15rem;
}

.barbox li,
.barbox2 li {
	width: 50%;
	text-align: center;
	position: relative;
}

.barbox:before,
.barbox:after {
	position: absolute;
	width: .3rem;
	height: .1rem;
	content: "";
}

.barbox:before {
	border-left: 2px solid #00ffff;
	left: 0;
	border-top: 2px solid #00ffff;
}

.barbox:after {
	border-right: 2px solid #00ffff;
	right: 0;
	bottom: 0;
	border-bottom: 2px solid #00ffff;
}

.barbox li:first-child:before {
	position: absolute;
	content: "";
	height: 50%;
	width: 1px;
	background: rgba(255, 255, 255, .2);
	right: 0;
	top: 25%;
}

.barbox {
	border: 1px solid rgba(25, 186, 139, .17);
	position: relative;
}

.barbox li {
	font-size: .3rem;
	color: #ffeb7b;
	padding: .05rem 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: bold;
}

.barbox2 li {
	font-size: .19rem;
	color: #637c9f;
	padding-top: .1rem;
}

.map {
	position: relative;
	height: 4.3rem;
	z-index: 9;
}

.map4 {
	width: 100%;
	height: 4.3rem;
	position: relative;
	/* left: -50%; */
	top: 2%;
	margin-top: .2rem;
	z-index: 5;
}

.map1,
.map2,
.map3 {
	position: absolute;
}

.map1 {
	width: 3.93rem;
	z-index: 2;
	top: .1rem;
	left: 1.7rem;
	animation: myfirst2 15s infinite linear;
}

.map2 {
	width: 3.66rem;
	top: .15rem;
	left: 1.87rem;
	z-index: 3;
	opacity: 0.2;
	animation: myfirst 10s infinite linear;
}

.map3 {
	width: 3.18rem;
	top: .4rem;
	left: 2.13rem;
	z-index: 1;
}

#echarts1,
#echarts2,
#echarts3,
#echarts6,
#echarts7,
#echarts8 {
	position: relative;
}

#echarts1:before,
#echarts2:before,
#echarts3:before,
#echarts6:before,
#echarts7:before,
#echarts8:before {
	position: absolute;
	content: "23124";
	width: 100%;
	text-align: center;
	bottom: .15rem;
	color: #fff;
	opacity: .7;
	font-size: .18rem;
}

#echarts1:before {
	content: "平均单客价"
}

#echarts2:before {
	content: "男消费"
}

#echarts3:before {
	content: "女消费"
}

#echarts6:before {
	content: "新增会员"
}

#echarts7:before {
	content: "新增领卡会员"
}

#echarts8:before {
	content: "新增消费会员"
}



.tabs {
	text-align: center;
	padding: .1rem 0 0 0;
}

.tabs a {
	position: relative;
	display: inline-block;
	margin-left: 1px;
	padding: .05rem .2rem;
	color: #898989;
	transition: all .3s ease-out 0s;
	font-size: 14px;
}

.tabs li {
	display: inline-block;
}

.tabs a:after {
	position: absolute;
	width: 1px;
	height: 10px;
	background-color: rgba(255, 255, 255, .1);
	content: '';
	margin-left: 0;
	right: -1px;
	margin-top: 7px;


}

.tabs li a.active {
	border: 1px solid rgba(25, 186, 139, .17);
	background: rgba(255, 255, 255, .05);
	color: #fff;
}

.tit02 {
	text-align: center;
	margin: .13rem 0;
	position: relative
}

.tit02 span {
	border: 1px solid rgba(25, 186, 139, .17);
	letter-spacing: 2px;
	padding: .01rem .2rem;
	background: rgba(255, 255, 255, .05);
	font-size: .12rem;
	color: #999;
}

.tit02:before,
.tit02:after {
	position: absolute;
	width: 26%;
	height: 1px;
	background: rgba(25, 186, 139, .2);
	content: "";
	top: .12rem;
}

.tit02:after {
	right: 0;
}

.tit02:before {
	left: 0;
}

.wrap {
	height: 2.54rem;
	overflow: hidden;
}

.wrap li {
	line-height: .42rem;
	height: .42rem;
	font-size: .18rem;
	text-indent: .24rem;
	margin-bottom: .1rem;
}

.wrap li p {
	border: 1px solid rgba(25, 186, 139, .17);
	color: rgba(255, 255, 255, .6);
}

.sy {
	float: left;
	width: 33%;
	height: 2.2rem;
	margin-top: -.25rem;
}


.adduser {
	height: 1.5rem;
	overflow: hidden;
}

.adduser li {
	height: .29rem;
  padding: 0 0.1rem;
}

.adduser img {
	width: .40rem;
	border-radius: .5rem;
	margin-right: .1rem;
	display: inline-block;
	vertical-align: middle;
}

.adduser span {
	line-height: .29rem;
	font-size: .14rem;
	color: rgba(255, 255, 255, .6);
}

.adduser span {
    line-height: .29rem;
    font-size: .13rem;
    color: #00ffff;
    letter-spacing: 1px;
    font-weight: 100;
}

.adduser li:nth-child(odd){
  /* font-family: 'JiZiJingDianJiHeiJian-Shan'; */
  /* font-family: 'ShangShouZhengYaTi'; */
  font-weight: bold!important;
}
.adduser li:nth-child(even){
  /* font-family: 'JiZiJingDianJiHeiJian-Shan'; */
  /* font-family: 'ShangShouZhengYaTi'; */
  font-weight: bold!important;
}

.sycm ul {
	margin-left: -.2rem;
	margin-right: -.2rem;
	padding: .02rem 0;
}

.sycm li {
	float: left;
	width: 25%;
	text-align: center;
	position: relative;
  padding-bottom: 0.15rem;
}

.sycm2 li {
	float: left;
	width: 50%;
	text-align: center;
	position: relative;
  padding-bottom: 0.05rem;
}

.sycm li:before {
	position: absolute;
	content: "";
	height: 30%;
	width: 1px;
	background: rgba(255, 255, 255, .1);
	right: 0;
	top: 15%;
}

.sycm li:last-child:before {
	width: 0;
}

.sycm li h2 {
	font-size: .22rem;
	color: #fff;
  transform: scaleX(.75) scaleY(.85);
  font-weight: bolder;
}

.sycm li h2 span{
	font-size: .22rem;
	color: #fff;
	opacity: 1!important;
  letter-spacing: 0;
}

.sycm li span {
	font-size: .12rem;
	color: #D2D2D2;
	letter-spacing: 2px;
}

.tit02:before, .tit02:after {
    position: absolute;
    width: 26%;
    height: 1px;
    background: rgba(25, 186, 139, .2);
    content: "";
    top: 0.06rem;
}

#dwtj .dttj_lie{
	width: 33.3%;
	/* opacity: 0.9; */
}
.ani_circle_lie{
	width: 50%;
}
.ani_circle_lie:nth-child(1):before {
    position: absolute;
    content: "";
    height: 30%;
    width: 1px;
    background: rgba(255, 255, 255, .1);
    right: 0;
    top: 32%;
}
.ani_circle{
	width: 100%;
	height: 1rem;
}
.ani_circle_lie:nth-child(1) .ani_c{
	        width: 0.9rem;
	        height: 0.9rem;
	        border-radius: 100%;
	        position: absolute;
	        left: 50%;
	        top: 50%;
	        margin-left: -0.455rem;
	        margin-top: -0.44rem;
	        border-left: none;
	        background: url(../../assets/bigdataStyle1/images/loading.png);
	        background-size: 100% 100%;
	        animation: myfirst 5s 0s linear infinite;
}
.ani_circle_lie:nth-child(2) .ani_c{
	        width: 0.9rem;
	        height: 0.9rem;
	        border-radius: 100%;
	        position: absolute;
	        left: 50%;
	        top: 50%;
	        margin-left: -0.45rem;
	        margin-top: -0.44rem;
	        border-left: none;
	        background: url(../../assets/bigdataStyle1/images/loading.png);
	        background-size: 100% 100%;
	        animation: myfirst 5.5s 0.5s linear infinite;
}
.shdw_icon{
	text-align: center;
	color: #fff;
	/* font-weight: bold; */
}
.shdw_icon i{
	font-size: 30px;
	font-weight: normal;
}
.shdw_icon span{
	line-height: 30px;
	color: #fff;
	font-weight: bold;
	font-size: 13px;
}
.gp_con{
	padding: 0.1rem;
	position: relative;
	z-index: 99999;
}

 #mapCheck{
    height: 0;
    top: 0.1rem;
  }
  #mapCheck .mapCheckBox{
     width: 1.6rem;
     height: auto;
     background: url(../../assets/bigdataStyle1/images/mapCheck_bg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     box-sizing: border-box;
     padding-left: 0.2rem;
     padding-top: 0.2rem;
  }
  #mapCheck .mapCheckShai{
    width: 0.24rem;
    height: 0.24rem;
    background: url(../../assets/bigdataStyle1/images/shai_icon.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    top: 0;
    right: -0.32rem;
  }
  #mapCheck .mapCheckShais{
    left: 0;
  }
  #mapCheck .el-checkbox-group{
    line-height: 0.25rem;
  }
  #mapCheck .is-checked~.el-checkbox__label{
    color: #63F2FF!important;
  }
  #mapCheck .el-checkbox__label{
    font-size: 12px;
  }
  #mapVideoTc  .el-table__cell{
    background-color: #0b0e0b;
    color: #FFFFFF;
    padding: 0;
  }
  #mapVideoTc .el-form-item{
    margin: 0;
  }
  #mapVideoTc .el-input__inner{
    width: 261px;
    border: 0;
  }
#mapVideoTc1  .el-table__cell{
  background-color: #0b0e0b;
  color: #FFFFFF;
  padding: 0;
}
#mapVideoTc1 .el-form-item{
  margin: 0;
}
#mapVideoTc1 .el-input__inner{
  width: 261px;
  border: 0;
}
#npCjjlXq  .el-table__cell{
  background-color: #0b0e0b;
  color: #FFFFFF;
  padding: 0;
}
#npCjjlXq .el-form-item{
  margin: 0;
}
#npCjjlXq .el-input__inner{
  width: 261px;
  border: 0;
}

#npCjjlXq .el-form-item__content .el-input__inner{
  width: 200px !important;
  border: 0;
}
#npCjjlXq .el-date-editor{
  width: 261px;
}
#npCjjlXq .el-button{
  background-color: #606266;
  color: #FFFFFF;
  border: 0;
}

  #mapVideoTc .el-form-item__content .el-input__inner{
    width: 200px !important;
    border: 0;
  }
  #mapVideoTc .el-date-editor{
    width: 261px;
  }
  #mapVideoTc .el-button{
    background-color: #606266;
    color: #FFFFFF;
    border: 0;
  }
#mapVideoTc1 .el-form-item__content .el-input__inner{
  width: 200px !important;
  border: 0;
}
#mapVideoTc1 .el-date-editor{
  width: 261px;
}
#mapVideoTc1 .el-button{
  background-color: #606266;
  color: #FFFFFF;
  border: 0;
}
  .messageLie .el-table tr{
    background-color: rgba(0,0,0,0)!important;
  }
  .messageLie td,.messageLie th{
    border:1px solid #00ffff!important;
    color: #00ffff!important;
  }
  .messageLie td{
    border-top: none!important;
    border-right: none!important;
  }
  .messageLie th{
    border-right: none!important;
  }
  .messageLie .el-table th.el-table__cell{
     background-color: rgba(0,0,0,0)!important;
  }
  .messageLie .el-table thead tr{
    background: rgba(0,255,255,0.3)!important;
    color: #fff!important;
  }
  .messageLie thead tr th:nth-last-child(2){
    border-right:1px solid #00ffff!important;
  }
  .messageLie tbody tr td:nth-last-child(1){
    border-right:1px solid #00ffff!important;
  }
  .messageLie .gutter{
    display: none;
  }
  #tb>div,#hb>div{
    width: 100%!important;
  }
  .isHideTb{
   /* height: 0!important;
    overflow: hidden;
    margin-top: 0!important; */
  }
  .el-select-dropdown__wrap{
    background: #409eff9e!important;
    background: unset;
    background-position: center top;
    background: inherit;
  }
  #bigdata3Box .bigdataYcjl .row-item .ceil{
    color: #fff!important;
  }
  #bigdata3Box~.el-picker-panel .el-picker-panel__footer{
    background-color: rgba(0,0,0,0)!important;
  }
  #bigdata3Box~.el-picker-panel .el-date-picker__time-header .el-input__inner{
    background: rgba(255,255,255,.85)!important;
  }
  .addnew #wrapper1{
    width: 725px!important;
    height: 411px!important;
  }
  #wrapper1 #crt{
    width: 725px!important;
    height: 411px!important;
  }
  #mapVideoTc {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    z-index: 2000;
    position: fixed;
    left: 0;
    top: 0;
  }
  #mapVideoTc .dialogBox {
    width: 1200px;
    height: 700px;
    position: fixed;
    left: 20%;
    top: 14%;
    transform: translate(-50%, -50%);
    z-index: 2001;
  }

  #mapVideoTc .dialogBox .dv-border-box-11 {
    border-radius: 30px;
    text-align: center;
    padding-left: 30px;
    padding-top: 100px;
  }

  #mapVideoTc .dialogBox .dv-border-box-11 td {
    color: rgba(255, 255, 255, .85) !important;
    line-height: 0.2rem;
  }

  #mapVideoTc .dialogBox .icon-guanbi-all1 {
    font-size: 0.3rem !important;
    color: #fff;
    right: -0.4rem;
    top: -0.02rem;
    cursor: pointer;
    opacity: 0.85;
  }


#mapVideoTc1 {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .75);
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
}
#mapVideoTc1 .dialogBox {
  width: 1200px;
  height: 700px;
  position: fixed;
  left: 20%;
  top: 14%;
  transform: translate(-50%, -50%);
  z-index: 2001;
}

#mapVideoTc1 .dialogBox .dv-border-box-11 {
  border-radius: 30px;
  text-align: center;
  padding-left: 30px;
  padding-top: 100px;
}

#mapVideoTc1 .dialogBox .dv-border-box-11 td {
  color: rgba(255, 255, 255, .85) !important;
  line-height: 0.2rem;
}

#mapVideoTc1 .dialogBox .icon-guanbi-all1 {
  font-size: 0.3rem !important;
  color: #fff;
  right: -0.4rem;
  top: -0.02rem;
  cursor: pointer;
  opacity: 0.85;
}


#mbRight1 .nowrap{
    line-height: 0.23rem;
  }

.strongNum{
  font-family: "strongNum";
}  

@keyframes myfirst2 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-359deg);
	}
}

@keyframes myfirst {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}


 /* loading样式 */
  .loadbox {
    width: 300px !important;
    height: 300px !important;
    margin-left: -150px !important;
    margin-top: -160px !important;
    box-sizing: border-box;
    padding-top: 290px;
    color: rgba(255, 255, 255, .75);
    font-size: 0.25rem;
  }

  .loadbox img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin:center center;
  }

  .loadbox .jzxz1 {
    animation: xz1 8s infinite linear;
  }

  @keyframes xz1 {
    from {
      transform: rotateZ(0deg);
    }

    50% {
      transform: rotateZ(180deg);
    }

    to {
      transform: rotateZ(360deg);
    }
  }

  .loadbox .jzxz2 {
    animation: xz2 7s infinite linear;
  }

  @keyframes xz2 {
    from {
      transform: rotateZ(0deg);
    }

    50% {
      transform: rotateZ(-180deg);
    }

    to {
      transform: rotateZ(-360deg);
    }
  }

  @keyframes shsfani {
    0% {
      transform: scale(0.5);
      opacity: 0.2;
    }
    90% {
      transform: scale(0.95);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

  @keyframes ssl {
    0% {
      opacity: 0.2;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes upAndDown {
    0% {
      transform: translate(0%,30%);
    }
    50% {
      transform: translate(0%,0%);
    }
    100% {
      transform: translate(0%,30%);
    }
  }

  @keyframes fxpgFootSs {
    0% {
      transform: translate(-50%,0) scale(1.05);
      /* opacity: 0; */
    }
    50% {
      transform: translate(-50%,0) scale(1);
      /* opacity: 1; */
    }
    100% {
      transform: translate(-50%,0) scale(1.05);
      /* opacity: 0; */
    }
  }

  @keyframes fxpgFootSsv2 {
    0% {
      transform: translate(-50%,-50%) scale(1.05);
      /* opacity: 0; */
    }
    50% {
      transform: translate(-50%,-50%) scale(1);
      /* opacity: 1; */
    }
    100% {
      transform: translate(-50%,-50%) scale(1.05);
      /* opacity: 0; */
    }
  }

  @keyframes fxpgCirAni {
    0% {
      transform: translate(-50%,0) rotate(0deg);
    }
    100% {
      transform: translate(-50%,0) rotate(360deg);
    }
  }

  @keyframes sjfxCirAni1 {
    0% {
      transform: translate(-50%,-50%) scale(1.05) rotate(0deg);
    }
    100% {
      transform: translate(-50%,-50%) scale(1.05) rotate(-360deg);
    }
  }

  @keyframes sjfxCirAni2 {
    0% {
      transform: translate(-50%,-50%) scale(1.02) rotate(0deg);
    }
    100% {
      transform: translate(-50%,-50%) scale(1.02) rotate(360deg);
    }
  }

  @keyframes boxShiroxesAni {
    0% {
      filter: none;
      empty-cells:inherit;
      object-fit: fill;
      unicode-bidi:normal;
      box-shadow: 0 0 0px rgba(0,255,255,0);
    }
    16% {
      filter: none;
      empty-cells:inherit;
      object-fit: fill;
      unicode-bidi:normal;
      box-shadow: 0 0 10px rgba(0,255,255,1);
    }
    32% {
      filter: none;
      empty-cells:inherit;
      object-fit: fill;
      unicode-bidi:normal;
      box-shadow: 0 0 0px rgba(0,255,255,0);
    }
    48% {
      filter: none;
      empty-cells:inherit;
      object-fit: fill;
      unicode-bidi:normal;
      box-shadow: 0 0 10px rgba(0,255,255,1);
    }
    64% {
      filter: none;
      empty-cells:inherit;
      object-fit: fill;
      unicode-bidi:normal;
      box-shadow: 0 0 0px rgba(0,255,255,0);
    }
    80% {
      filter: none;
      empty-cells:inherit;
      object-fit: fill;
      unicode-bidi:normal;
      box-shadow: 0 0 10px rgba(0,255,255,1);
    }
    100% {
      filter: none;
      empty-cells:inherit;
      object-fit: fill;
      unicode-bidi:normal;
      box-shadow: 0 0 0px rgba(0,255,255,0);
    }
  }
